<template>
  <view class="step-bar disFlxAC">
    <template v-for="(v, index) in list" :key="index">
      <view class="step-bar__item disFlxCC">
        <view class="step-bar__item--dot" :style="{ backgroundColor: statusColor[v.status] }">
          <text v-if="v.status === 'finish'" class="ali-icon icon-xuanzhong"></text>
          <text v-else>{{ index + 1 }}</text>
        </view>
        <view class="step-bar__item--name">
          <text>{{ v.name }}</text>
        </view>
      </view>
      <view
        v-if="index < list.length - 1"
        class="step-bar__line"
        :style="{
          backgroundColor: v.status === 'finish' ? statusColor[v.status] : statusColor.wait,
        }"
      ></view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { ref, watch } from 'vue';
  import type { PropType } from 'vue-types/dist/types';

  export interface StepBarItem {
    id: number;
    name: string;
    status: 'wait' | 'process' | 'finish' | 'error';
  }

  const statusColor = {
    finish: '#2878ff',
    process: '#2878ff',
    wait: '#dcdee0',
    error: 'red',
  };

  const props = defineProps({
    current: propTypes.number.def(0),
    list: {
      type: Array as PropType<string[]>,
      required: true,
    },
  });

  const list = ref<StepBarItem[]>([]);
  watch(
    () => props.list,
    (val) => {
      list.value = val.map((v, i) => {
        let status: StepBarItem['status'] = props.current === i ? 'process' : 'wait';
        if (i < props.current) status = 'finish';
        if (i > props.current) status = 'wait';
        return {
          id: i,
          name: v,
          status,
        };
      });
    },
    {
      immediate: true,
    },
  );

  watch(
    () => props.current,
    (nVal, oVal) => {
      if (nVal < oVal) {
        // 上一步
        list.value[nVal].status = 'process';
        list.value[oVal].status = 'wait';
      }
      if (nVal > oVal) {
        // 下一步
        list.value[nVal].status = 'process';
        list.value[oVal].status = 'finish';
      }
    },
  );
</script>

<style lang="scss" scoped>
  .step-bar {
    height: 160rpx;
    justify-content: center;
    &__item {
      &--dot {
        text-align: center;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background-color: #dcdee0;
        color: #fff;
        font-size: 24rpx;
        margin-bottom: 16rpx;
        line-height: 40rpx;
        transition: 0.3s;
        .ali-icon {
          color: #fff;
          font-size: 24rpx;
        }
      }
      &--name {
        color: #333333;
        font-size: 28rpx;
      }
    }
    &__line {
      width: 160rpx;
      height: 4rpx;
      background-color: #dcdee0;
      margin-top: -56rpx;
      transition: 0.3s;
    }
  }
</style>
